<template>
	<div class="middle">
		<div class="middlebg"></div>
		<div class="content">
			<div @click="showMessage">
				<el-alert type="error" v-if="list.length == 0">
				    暂无公告
				</el-alert>
        <el-alert type="error" v-else>
          公告:&nbsp;&nbsp;&nbsp;&nbsp;{{list.title}}
        </el-alert>
			</div>
			<!--四个卡片-->
			<div>
				<el-card class="card" v-if="rule==2?false:true">
					<div class="text" @click="teacher">
						<span class="number">{{homeCount.teacher}}</span>
						<span class="teacher">教师</span>
					</div>
				</el-card>
				<el-card class="card">
					<div class="text" @click="classes">
						<span class="number">{{homeCount.class}}</span>
						<span class="teacher">班级</span>
					</div>
				</el-card>
				<el-card class="card">
					<div class="text" @click="student">
						<span class="number">{{homeCount.student}}</span>
						<span class="teacher">学生</span>
					</div>
				</el-card>
				<el-card class="card">
					<div class="text" @click="equipment">
						<span class="number">{{homeCount.device}}</span>
						<span class="teacher">套设备</span>
					</div>
				</el-card>
			</div>
			<!--<div class="grades">-->
				<!--<div class="grade">-->
					<!--<img src="../../assets/image/clock.png" alt="" />-->
					<!--<span>三年级<1>班</span>-->
					<!--<span class="go">马上就要开课了</span>-->
				<!--</div>-->
				<!--<div class="tasb">-->
					<!--<img src="../../assets/image/lian.png" alt="" />-->
					<!--<span>发布家庭作业</span>-->
				<!--</div>-->
			<!--</div>-->
			<!--课表部分-->
			<div class="timetable">
				<h1 align="center" class="h">
					<b><em>课程表</em></b>
				</h1>
				<table style="color:#666" width="90%" height="395" border="1" cellpadding="3" cellspacing="0" >
					<tr>
						<td width="76"></td>
						<td width="56" height="50"> </td>
						<td width="100" class="week">星期一</td>
						<td width="100" class="week">星期二</td>
						<td width="100" class="week">星期三</td>
						<td width="100" class="week">星期四</td>
						<td width="100" class="week">星期五</td>
					</tr>
					<tr>
					<td rowspan="4" class="week">上午</td>
					<td>1</td>
						<td rowspan="1" id="11" @click="getcourseid(item.id)"></td>
						<td rowspan="1" id="21"></td>
						<td rowspan="1" id="31"></td>
						<td rowspan="1" id="41" @click="getcourseid"></td>
						<td rowspan="1" id="51"></td>
					</tr>
					<tr>
					<td>2</td>
						<td rowspan="1" id="12"></td>
						<td rowspan="1" id="22" ></td>
						<td rowspan="1" id="32"> </td>
						<td rowspan="1" id="42"></td>
						<td rowspan="1" id="52"></td>
					</tr>
					<tr>

					<td>3</td>
						<td rowspan="1" id="13" @click="getcourseid()"></td>
						<td rowspan="1" id="23"></td>
						<td rowspan="1" id="33"></td>
						<td rowspan="1" id="43"></td>
						<td rowspan="1" id="53"></td>
					</tr>
					<tr>

					<td>4</td>
						<td rowspan="1" id="14"></td>
						<td rowspan="1" id="24"></td>
						<td rowspan="1" id="34"> </td>
						<td rowspan="1" id="44"></td>
						<td rowspan="1" id="54"></td>
					</tr>
					<tr>
					<td rowspan="3" class="week">下午</td>
					<td>5</td>
						<td rowspan="1" id="15"></td>
						<td rowspan="1" id="25"></td>
						<td rowspan="1" id="35"></td>
						<td rowspan="1" id="45"></td>
						<td rowspan="1" id="55"></td>
					</tr>
					<tr>

					<td>6</td>
						<td rowspan="1" id="16"></td>
						<td rowspan="1" id="26"></td>
						<td rowspan="1" id="36"> </td>
						<td rowspan="1" id="46"></td>
						<td rowspan="1" id="56"></td>
					</tr>
					<tr>

					<td>7</td>
						<td rowspan="1" id="17"></td>
						<td rowspan="1" id="27"></td>
						<td rowspan="1" id="37"></td>
						<td rowspan="1" id="47"></td>
						<td rowspan="1" id="57"></td>
					</tr>
				</table>
			</div>
			<!--消息内容展示-->
			<el-dialog
        v-if="list.length == 0?false:true"
			  :title="notice.title"
			  :visible.sync="showContent"
			  width="30%"
			  center>
			  <span v-html="notice.contents"></span>
			  <div class="time" style="text-align: right; padding-top: 10px;">{{notice.create_time}}</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>

	import $ from 'jquery'
	export default {
		data() {
      return {
        list: [],
        homeCount:[],//统计数量
        course:[],//课程表
        weeks:'',
        rule:'',
        showContent:false,
        messageId:'',
        notice:'',//弹框通知
			}
		},
		methods:{
			getNews(){
				this.$http.post('/api/first/firstNotice')
					.then(res=>{
					  if(res.data.data == null){
              return
            }else {
              this.list = res.data.data
            }

            if(res.data.data) {
              this.messageId = res.data.data.id
            }

					})
			},
			//获取课程表数据
			getcourse(){
				this.$http.post('/api/first/course',
				{
					weeks:this.weeks,
				}).then(res=>{
					this.course = res.data.data
					this.weeks = res.data.week
					var arr=['11','12','13','14','15','16','17','21','22','23','24','25','26','27','31','32','33','34','35','36','37',
			       			'41','42','43','44','45','46','47','51','52','53','54','55','56','57']
					if(this.course.length == 0) {
						for(var i=0;i<arr.length;i++){
							$('#'+arr[i]).html("");
						}
					}else{
						for(var i=0;i<arr.length;i++){
							$('#'+arr[i]).html("");
						}
						for(var i=0;i<arr.length;i++){
							if(typeof this.course[i] !="undefined"){
								var num = this.course[i].week+""+this.course[i].mark;
								var bool = arr.indexOf(num);
								var plan_id = this.course[i].plan_id
								if(bool > -1) {
									$('#'+num).append(
										this.course[i].get_grade.grade_title+this.course[i].get_class.class_name+"<br/>"
									)

								}
							}
						}
					}
				})
			},
			getHomeCount(){
				this.$http.post('api/first/homeCount')
					.then(res=>{
						this.homeCount = res.data.data
					})
			},
			getcourseid(){
				this.$http.post('/api/first/course',
				{
					weeks:this.weeks,
				}).then(res =>{
				})
			},
			//跳转到教师管理
			teacher(){
				this.$router.push({name:'teacher'})
			},
			classes(){
				this.$router.push({name:'classes'})
			},
			student(){
				this.$router.push({name:'student'})
			},
			equipment(){
				this.$router.push({name:'equipment'})
			},
			//上一周
			up(val){
				if(this.weeks >1 && this.weeks <= 20) {
					this.weeks--;
					this.getcourse()
				}
			},
			//下一周
			down(val){
				if(this.weeks >=1 && this.weeks < 20) {
					this.weeks++;
					this.getcourse()
				}
			},
			showMessage(){
				this.showContent = true
					this.$http.post('/api/first/firstSchoolIsRead',{
						id:this.messageId
					}).then(res=>{
						this.notice = res.data.data
					})
			}
		},
		created(){
			var token = sessionStorage.getItem('token')
			if(!token){
				this.$router.push({name:'login'})
			}
			this.getNews()
			//获取课程信息
			this.getcourse()
			//获取首页的统计数量
			this.getHomeCount()
      //获取到身份
      this.rule = localStorage.getItem('rule')
		}
	}
</script>
<style>
	.el-main {
		padding: 0;
	}
	.el-card__body {
		padding: 0 !important;
	}
	.el-alert.el-alert--error  {
		cursor: pointer;
	}
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.content {
		position: relative;
		top: 0;
		left: 0;
		padding: 30px;
		padding-bottom: 10;
		.card {
			width: 15%;
			height: 80px;
			display: inline-block;
			margin: 1% 4%;
			.text {
				width: 100%;
				height: 80px;
				color: #fff;
				position: relative;
				cursor: pointer;
				.number {
					position: absolute;
					top: 27%;
					left: 20%;
					font-size: 34px;

				}
				.teacher {
					position: absolute;
					top: 40%;
					left: 52%;
				}
			}
			&:nth-child(1) {
				background-color:#409EFF;
			}
			&:nth-child(2) {
				background-color:#F56C6C;
			}
			&:nth-child(3) {
				background-color:#32c5d2;
			}
			&:nth-child(4) {
				background-color:#8e44ad;
			}
		}
		.grades {
			height: 40px;
			line-height: 40px;
			.grade {
				background-color: #f89917;
				height: 40px;
				width: 70%;
				display: inline-block;
				border-radius: 5px;
				position:relative;
				img {
					position: absolute;
					padding:0 10px;
					top: 5px;
				}
				span {
					padding-left: 50px;
				}
				.go {
					color: #fff;
				}

			}
			.tasb {
				height: 40px;
				width: 28%;
				background-color:#9cbf83;
				display: inline-block;
				border-radius: 5px;
				position:relative;
				img {
					position: absolute;
					padding:0 10px;
					top: 7px;
				}
				span {
					padding-left: 50px;
					color: #fff;
				}
			}
		}
		.timetable {
			background: #fff;
			width: 100%;
			margin-top:1%;
			padding-bottom: 10px;
			-moz-box-shadow:0 0 10px #ccc;
	     	-webkit-box-shadow:0 0 10px #ccc;
	    	box-shadow:0 0 6px #ccc;
	    	position: relative;
	    	h1 {
				height: 60px;
				line-height: 60px;
				position: relative;
				.left {
					position: absolute;
					top: 15px;
					left: 60px;
				}
				.right {
					position: absolute;
					top: 15px;
					right: 68px;
				}
			}
			table {
				margin-left: 60px;
				text-align: center;
				margin-bottom: 20px;
				border: 1px solid #bbb;
				.week {
					color: #232222;
					font-weight: 700;
				}
				td {
					font-size: 14px;
					padding: 5px 0;
					border: 1px solid #bbb;
					.obj {
						font-size: 8px;
						color: #00B02D;
					}
				}
			}
		}
	}

</style>
